/**
 * Created by zhangsong on 2019/10/18.
 */
import React, { Component, useEffect } from 'react';
import { Input } from 'antd';

import Style from './index.module.scss';

const InputGroup = Input.Group;

export default class IndexGroupGrid extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text1: '',
      text2: '',
      text3: '',
      text4: '',
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const { value } = nextProps;
    const { text1, text2, text3, text4 } = prevState;
    // 当传入的 value 发生变化的时候，更新state
    if (value !== `${text1}${text2}${text3}${text4}`) {
      let text = value;
      let newText1 = '';
      let newText2 = '';
      let newText3 = '';
      let newText4 = '';
      if (typeof text !== 'string') {
        text = '';
      }
      if (text.length > 4) {
        newText1 = text.substring(0, 4);
        if (text.length > 8) {
          newText2 = text.substring(4, 8);
          if (text.length > 12) {
            newText3 = text.substring(8, 12);
            newText4 = text.substring(12);
          } else {
            newText3 = text.substring(8);
          }
        } else {
          newText2 = text.substring(4);
        }
      } else {
        newText1 = text.substring(0);
      }
      return {
        text1: newText1,
        text2: newText2,
        text3: newText3,
        text4: newText4,
      };
    }
    // 否则，对于state不进行任何操作
    return null;
  }

  handleChangeText = index => ({ target: { value = '' } = {} } = {}) => {
    let { text1, text2, text3, text4 } = this.state;
    if (index === 1) {
      text1 = value;
    } else if (index === 2) {
      text2 = value;
    } else if (index === 3) {
      text3 = value;
    } else if (index === 4) {
      text4 = value;
    }
    this.setState({
      text1,
      text2,
      text3,
      text4,
    });
    const { onChange, disableds } = this.props;
    if (onChange) {
      onChange(`${text1}${text2}${text3}${text4}`);
    }
  };

  render() {
    const { text1, text2, text3, text4 } = this.state;
    const { disableds } = this.props;
    return (
      <InputGroup compact className={Style.wrapper}>
        <Input
          value={text1}
          className={Style.input}
          placeholder=""
          onChange={this.handleChangeText(1)}
          maxLength={4}
          disabled={disableds}
        />
        <Input className={Style.separator} placeholder="-" disabled />
        <Input
          value={text2}
          className={Style.input}
          placeholder=""
          onChange={this.handleChangeText(2)}
          maxLength={4}
          disabled={disableds}
        />
        <Input className={Style.separator} placeholder="-" disabled />
        <Input
          value={text3}
          className={Style.input}
          placeholder=""
          onChange={this.handleChangeText(3)}
          maxLength={4}
          disabled={disableds}
        />
        <Input className={Style.separator} placeholder="-" disabled />
        <Input
          value={text4}
          className={Style.input}
          placeholder=""
          onChange={this.handleChangeText(4)}
          maxLength={4}
          disabled={disableds}
        />
      </InputGroup>
    );
  }
}
